﻿@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="Pager#Overview" />Overview</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager">Pager</a> is a standalone UI component that enables data navigation and visualizes the current position within a bound data source. You can specify the following properties to customize the Pager:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.PageCount">PageCount</a> - The total number of pages.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.ActivePageIndex">ActivePageIndex</a> - The zero-based index of the current page.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.VisibleNumericButtonCount">VisibleNumericButtonCount</a> - The maximum number of page numbers displayed simultaneously.</li>
    </ul>
    <p>
        To set up how users navigate between the Pager's pages, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.NavigationMode">NavigationMode</a> property. In <strong>Auto</strong> mode, the pager switches from numeric buttons to the Go to Page input box in the following situations:
    </p>
    <ul>
        <li>The total number of pages is greater or equal to the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.SwitchToInputBoxButtonCount" >SwitchToInputBoxButtonCount</a> value. The default <strong>SwitchToInputBoxButtonCount</strong> value is 11. If you set <strong>PageCount</strong> to this value (<strong>11</strong>), the component switches to the Go to Page input box.</li>
        <li>The Pager is displayed on small devices. In this case, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.SwitchToInputBoxButtonCount" >SwitchToInputBoxButtonCount</a> value is not taken into account.</li>
    </ul>
    <p>
        The Pager component supports different size modes. To specify the component's size in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.SizeMode">SizeMode</a> property.
    </p>
    <p>
        Try the demo below - use the drop-down list in the demo card's header to apply different size modes. To navigate between pages via two-way synchronization, use the Pager component or linked Spin Edit components.
    </p>
</div>
<div class="many-options-container">
    <div>
        <span>Page Count: </span>
        <DxSpinEdit CssClass="mr-1 my-1 option-editor" @bind-Value="@PageCount" MinValue="0" MaxValue="int.MaxValue"></DxSpinEdit>
    </div>
    <div class="ml-576">
        <span>Active Page Index: </span>
        <DxSpinEdit CssClass="mr-1 my-1 option-editor" @bind-Value="@ActivePageIndex" MinValue="0" MaxValue="@(Math.Max(0,PageCount - 1))"></DxSpinEdit>
    </div>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Navigate between pages"/>
    </div>
    <div class="card-body overflow-auto">
        <DxPager PageCount="@PageCount"
                 @bind-ActivePageIndex="@ActivePageIndex"
                 SizeMode="SizeMode">
        </DxPager>
    </div>
</div>

<div class="code-snippet card demo-card-wide">
    <CodeSnippetHeader DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager"/>
    <div class="card-footer text-muted ">
        <CodeSnippet_Pager></CodeSnippet_Pager>
    </div>
</div>

@code {
    int PageCount { get; set; } = 10;
    int ActivePageIndex { get; set; } = 1;
}
